<template>
  <div class="cart">
    <el-container>
      <el-header height="100%">
        <el-row :gutter="12">
          <el-col
            v-for="(item, index) in items"
            :key="index"
            @click.native="addItem(index)"
            :span="8"
          >
            <el-card shadow="hover" class="item">
              <i :class="icons[index]"></i>
              <span>{{ item.name }}</span>
            </el-card>
          </el-col>
          <!--<el-col-->
          <!--:span="8">-->
          <!--<el-card shadow="hover" class="item" @click="candy">-->
          <!--<i class="el-icon-lollipop"></i>-->
          <!--<span>糖果</span>-->
          <!--</el-card>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
          <!--<el-card shadow="hover" class="item" @click="addFrenchFries">-->
          <!--<i class="el-icon-potato-strips"></i>-->
          <!--<span>薯条</span>-->
          <!--</el-card>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
          <!--<el-card shadow="hover" class="item" @click="addCoffee">-->
          <!--<i class="el-icon-coffee"></i>-->
          <!--<span>咖啡</span>-->
          <!--</el-card>-->
          <!--</el-col>-->
        </el-row>
      </el-header>
      <el-main>
        <div>
          <el-table
            :data="cartItems"
            show-summary
            :summary-method="getSummaries"
          >
            <el-table-column prop="name" label="商品名"> </el-table-column>
            <el-table-column prop="price" label="单价"></el-table-column>
            <el-table-column prop="count" label="库存"></el-table-column>
            <el-table-column
              prop="shopping"
              label="商品购物数"
            ></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button
                  @click="decline(scope.row)"
                  class="el-icon-remove"
                ></el-button>
                <el-button
                  @click="increase(scope.row)"
                  class="el-icon-circle-plus"
                ></el-button>
              </template>
            </el-table-column>
            <el-table-column prop="surplus" label="剩余数量"> </el-table-column>
            <el-table-column prop="total" label="商品价格"></el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'ShoppingCart',
  data() {
    return {
      icons: ['el-icon-lollipop', 'el-icon-potato-strips', 'el-icon-coffee'], // 这里存储图标信息
    };
  },
  computed: {
    ...mapGetters('cartModule', ['items', 'shopping', 'total']),
    cartItems() {
      // const items = this.items.map(item => ({
      //   name: item.name,
      // }))
      // const items1 = this.items.map(item => {
      //   return {
      //     name: item.name,
      //   }
      // });
      // return items1;
      // const self = this;
      // const items = this.items.map(
      //
      //         function(item, index) {
      //   return {
      //     name: item.name,
      //     price:item.price,
      //     surplus: self.shopping[index].shoppingNumber
      //   }
      // });
      // return items;
      const self = this;
      const items = this.items.map(function(item, index) {
        return {
          name: item.name,
          price: item.price,
          count: item.count,
          shopping: self.shopping[index].shoppingNumber,
          surplus: item.count - self.shopping[index].shoppingNumber,
          total: self.shopping[index].shoppingNumber * item.price,
        };
      });
      return items;
    },
  },
  methods: {
    decline(item) {
      const index = this.cartItems.indexOf(item);
      this.$store.dispatch('cartModule/decline', { index });
    },
    increase(item) {
      const index = this.cartItems.indexOf(item);
      // console.log(index);
      this.$store.dispatch('cartModule/increase', { index });
    },

    addItem(index) {
      // console.log(index);
      this.$store.dispatch('cartModule/increase', { index });
    },

    getSummaries() {
      return ['', '', '', '', '', '总计：', this.total];
    },
  },
};
</script>

<style scoped>
.cart {
  padding-top: 20px;
}

.item {
  text-align: center;
}
.item i {
  display: block;
  font-size: 5em;
}
</style>
